<template>
  <view class="login-container">
   <!-- 提示登录的图标-->
   <uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
   <!-- 登录按钮-->
   <!-- -->
   <button type="primary" class="btn-login" open-type="getUserInfo" @getuserinfo="getUserInfo">一键登录</button>
   <!-- 登录提示-->
    <view class="tips-text">登录后尽享更多权益</view>
  </view>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    data(){
      return{}
    },
    computed:{
      ...mapState({
        redirectInfo:state => state.user.redirectInfo
      })
    },
    methods:{
      //获取微信用户的基本信息
      getUserInfo(e){
        console.log(e);
        //判断是否获取用户信息成功
      if(e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg('您取消了登录授权!')
       
       //获取用户信息成功，e.detail.userInfo就是用户基本信息
       this.$store.commit('user/UPDATEUSERINFO',e.detail.userInfo)
       //获取登录成功后的 Token 字符串
       this.getToken(e.detail)
      },
      //调用登录接口，换取永久的token
      async getToken(info){
        //调用微信登录接口
        const [err , res] = await uni.login().catch(err => err)
        //判断是否 uni.login() 调用失败
        if(err || res.errMsg !== 'login:ok') return uni.$showMsg('登录失败!')
        
        //准备参数对象
        const query = {
          code:res.code,  //用户登录凭证
          encryptedData: info.encryptedData, //完整用户信息密文
          iv: info.iv,   //加密算法的初始向量
          rawData: info.rawData, //用户原始数据字符串
          signature: info.signature //使用shal得到字符串
        }
        //换取token
        const {data:loginResult} = await uni.$http.post('/api/public/v1/users/wxlogin' , query)
        if(loginResult.meta.status == 400){
          uni.$showMsg('登录成功')   
          // 调用store /user 中的方法 将token存储到vuex中
          //this.$store.commit('user/UPDATETOKEN',loginResult.message.token)
          this.$store.commit('user/UPDATETOKEN','Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjIzLCJpYXQiOjE1NjQ3MzAwNzksImV4cCI6MTAwMTU2NDczMDA3OH0.YPt-XeLnjV-_1ITaXGY2FhxmCe4NvXuRnRB8OMCfnPo')
          //判断vuex中的 redirectInfo 是否为null
          //如果不为 null，则登录成功之后,需要重新导航到对应页面
          this.navigateBack()
        }else{
          uni.$showMsg('登录失败!')
        }
     
      },
      //返回之前的页面
      navigateBack(){
        //redirectInfo 不为null ， 并且导航方式为 switchTab
        if(this.redirectInfo && this.redirectInfo.openType == 'switchTab'){
          //调用小程序提供的 uni.switchTab() API 进行页面的导航
          uni.switchTab({
            url:this.redirectInfo.from,
            //导航成功后，把vuex中的 redirectInfo 重置为null
           complete:()=>{
              this.$store.commit('user/UPDATEREDIRECTINFO',null)
              uni.showToast({
                title:'登录成功',
                icon:'none'
              })
           }
          })
        }
      }
    }
  }
</script>

<style lang="scss">
  .login-container{
    height: 750rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f8f8f8;
    position: relative;
    overflow: hidden;
    
    // 绘制登录盒子底部的半椭圆造型
     &::after {
       content: ' ';
       display: block;
       position: absolute;
       width: 100%;
       height: 40px;
       left: 0;
       bottom: 0;
       background-color: white;
       border-radius: 100%;
       transform: translateY(50%);
     }
     
     .btn-login{
       width: 90%;
       border-radius: 100px;
       margin: 15px 0;
       background-color: #c00000;
     }
     
     // 按钮下方提示消息的样式
       .tips-text {
         font-size: 12px;
         color: gray;
       }
  }
</style>
